<template>
  <div :class="[
    'ebdmn-toolbar-layout-container', {
      'higher': higher
    }
  ]"
  >
    <div>
      <slot name="left" />
    </div>
    <div class="ebdmn-toolbar-layout-right-container">
      <div class="ebdmn-toolbar-btn-rl-container">
        <slot name="switch" />
      </div>
      <div class="ebdmn-toolbar-btn-rr-container">
        <slot name="right" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EbdmnToolbarLayout',
  componentName: 'EbdmnToolbarLayout',
  props: {
    higher: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
  .ebdmn-toolbar-layout-container {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: space-between;

    &.higher {
      height: 48px;
    }

    .ebdmn-toolbar-layout-right-container {
      display: flex;

      .ebdmn-toolbar-btn-rl-container {
        display: flex;
        margin-right: 8px;
      }

      .ebdmn-toolbar-btn-rr-container {
        display: flex;
      }
    }

    ::v-deep {
      margin-bottom: 0;
    }
  }
</style>
